<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="file-behavior">
    <div class="con-title">
      <span>打印刻录情况</span>
      <div>
        <el-select v-model="dateType" size="mini" placeholder="近一周" @change="changeTime">
          <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
        </el-select>
        <el-date-picker
          v-if="dateType == '4'"
          v-model="pickTime"
          size="mini"
          type="daterange"
          clearable
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="margin-left: 10px"
          @change="changeTime" />
      </div>
    </div>
    <div class="f-bottom">
      <div class="left">
        <div style="margin: 10px 0">
          <span
            v-for="(item, index) in btns"
            :key="item + index"
            :class="['btn-box', activeIndex == index ? 'active' : '']"
            @click="handleChangeBtn(index,item)">
            {{ item.name }}
          </span>
        </div>

        <el-row class="l-top">
          <el-col class="bg-box" :span="24">
            <div>刻画周期内{{activeIndex==0?"打印":"刻录"}}文件数量</div>
            <p>
              <span class="blue-color">{{ total || 0 }}</span> <span>个</span>
            </p>
          </el-col>
          <el-col class="bg-box" v-if="activeIndex==1" :span="24">
            <div>刻录文件大小</div>
            <p>
              <span class="blue-color">{{ sizeTotal || '0M' }}</span>
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <hk-table
          ref="staffTable"
          :loading="loading"
          :table-data="tableData"
          :table-columns="tableList"
          :total="total"
          :table-height="90"
          :show-index="true"
          :query-params="nQueryParams"
          @changePage="getData" >
          <template #result="scope">
            <!-- 结果 0失败 1成功 2未知 -->
            <img
              style="width: 20px; margin-right: 10px;vertical-align: bottom;"
              :src="
                scope.row.result == 1
                  ? require(`@/assets/images/zhuangtai2.png`)
                  : scope.row.timeoutType == 0
                    ? require(`@/assets/images/zhuangtai0.png`)
                    : require(`@/assets/images/zhuangtai3.png`)
              "
            />
            <span>{{scope.row.result==0?'失败':scope.row.result==1?'成功':'未知'}}</span>
          </template>
        </hk-table>
      </div>
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table/index.vue'
import { fileBehavior } from '@/api/dispose/userPortrait'
import { fileOperation } from '@/api/entityPortrait'

export default {
  components: {
    HkTable,
  },
  props: {
    ip: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      total:0,
      sizeTotal:'0.00M',
      type:'1',
      loading: false,
      tableData: [],
      defaultList: [
        { label: '文件名', param: 'file_name' },
        { label: '文件密级', param: 'security_level' },
        { label: '文件数量', param: 'file_count' },
        { label: '文件大小', param: 'file_size' },
        { label: '操作时间', param: 'op_time' },
        { label: '结果', param: 'result',type:'slot' },
      ],
      tableList:[
        { label: '文件名', param: 'file_name' },
        { label: '文件密级', param: 'security_level' },
        { label: '文件数量', param: 'file_count' },
        { label: '操作时间', param: 'op_time' },
        { label: '结果', param: 'result',type:'slot' },
      ],
      nQueryParams: { current: 1, size: 10 },
      btns: [{type:'1',name:'打印刻画'},{type:'2',name:'刻录刻画'},],
      activeIndex: 0,
      dateType: '2',
      // 时间选择
      dateSel: [
        {
          label: '近一日',
          value: '1',
        },
        {
          label: '近一周',
          value: '2',
        },
        {
          label: '近一月',
          value: '3',
        },
        {
          label: '自定义',
          value: '4',
        },
      ],
      pickTime: '',
      daysData: {
        yAxisArr: [],
        dataArr: [],
      },
      axisArr: ['12a', '2a', '4a', '6a', '8a', '10a', '12p', '2p', '4p', '6p', '8p', '10p'],
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
      fileObj: {
        // 打印频次
        printFrequency: '',
        // 刻录频次/天
        cdFrequency: '',
        printTotal: 0,
        cdTotal: 0,
        // 最后更新时间
        lastUpdated: '',
        timeSlotList: [{}],
      },
    }
  },
  watch: {
    ip: {
      handler(newValue) {
        if (newValue) {
          this.getData()
        }
      },
      immediate: false,
      deep: true,
    },
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getData() {
      if (this.dateType === '4' && this.pickTime.length === 0) return
      else if (this.dateType !== '4') {
        this.pickTime = []
      }
      const startTime = this.pickTime[0] || ''
      const endTime = this.pickTime[1] || ''
      const params = { ...this.nQueryParams,searchType: this.dateType,type:this.type, startTime, endTime, ip: this.ip }
      fileOperation(params).then((res) => {
       this.sizeTotal=res.sizeTotal;
       this.total=res.total;
       this.tableData=res.list;
      })
    },
    //  切换打印、刻画按钮
    handleChangeBtn(index,item){
    this.activeIndex = index;
    this.type=item.type;
    if(item.type=='1'){
      this.tableList=this.defaultList.filter(i=>{
        return i.param!='file_size'
      })
    }else{
      this.tableList=this.defaultList
    }
    this.getData();
    },
    changeTime() {
      this.getData()
    },
    // 获取列表数据
    getList() {},
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme{
  .bg-box{background:#112c65 !important;}
}
::v-deep .el-date-editor--daterange.el-input__inner {
  width: 350px !important;
}
.file-behavior {
  width: 100%;
  padding: 20px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  background: #fff;

  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
  }

  .l-value {
    margin: 20px 0 0;
    .little-word {
      margin-left: 6px;
      color: #8c8c8c;
    }
  }
  .f-bottom {
    display: flex;
    flex: 1;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 10px;
    .left {
      width: 16%;
      margin-right: 40px;
      .btn-box {
        font-size: 14px;
        cursor: pointer;
        padding: 8px 16px;
        border: 1px solid #c0c4cc;
        margin-right: 10px;
        border-radius: 4px;
        &.active {
          background: #4b6eef;
          border: 1px solid transparent;
          color: #fff;
        }
      }
      .l-top {
        font-weight: 600;
        font-size: 14px;
        padding: 10px 0 20px;
        .bg-box {
          background: #f3f5fb;
          padding: 20px;
          border-radius: 4px;
          &:nth-of-type(1) {
            margin-bottom: 20px;
          }
        }
        div {
          margin-bottom: 10px;
        }
        p {
          font-size: 20px;
          margin: 5px 0;
          font-weight: 100;
          span {
            margin-left: 5px;
            font-size: 14px;
            &.blue-color {
              color: #4b6eef;
              font-size: 20px;
              font-weight: 600;
            }
          }
        }
      }
      .l-bottom {
        padding: 20px 0;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      // border-left: 1px solid rgba(0, 0, 0, 0.08);
      padding-left: 10px;
      .targetTable {
        margin-top: 26px !important;
        height: calc(100% - 26px);
        min-height: 300px;
        max-height: 400px;
      }
    }
  }
}
::v-deep {
  .el-progress__text {
    margin-left: 20px;
    font-size: 12px !important;
  }
}
</style>
